<template>
    <el-aside id="asideId" :width="`${width}px`" :style="{height: height}" v-loading="showGrouploading">
        <el-container>
            <el-header>
                <el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
            </el-header>
            <el-main class="nopadding">
                <!-- <el-tree ref="group" class="menu" node-key="id" :data="list" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree> -->
                <!-- default-expand-all -->
                <el-tree
                    ref="group"
                    class="menu"
                    draggable
                    :data="list"
                    :highlight-current="true"
                    :current-node-key="''"
                    node-key="id"
                    :show-checkbox="check"
                    @check-change="checkChange"
                    :expand-on-click-node="false"
                    :filter-node-method="groupFilterNode"
                    :default-expanded-keys="defaultSelect"
                    @node-click="groupClick"
                    @node-expand="handNodeExpand"
                    @node-collapse="handNodeCollapse"
                >
                    <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ data.name }}</span>
                        <el-dropdown class="options" v-if="data.id && isAdd">
							<i class="el-icon-more"></i>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item v-if="node.level < 4" @click="handleAction('add', data)">添加下级部门</el-dropdown-item>
									<el-dropdown-item @click="handleAction('edit', data)">编辑部门</el-dropdown-item>
									<el-popconfirm :title="'确认删除部门：' + data.name +'?'" @confirm="handleDelete(node, data)">
									<template #reference>
										<div class="dropdownitem">删除部门</div>
									</template>
								</el-popconfirm>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
						<!-- <span class="options" v-if="data.id && isAdd">
							<i class="el-icon-plus" style="margin-right: 10px;" title="添加下级部门" @click.stop="handleAction('add', data)" v-if="node.level < 4"></i>
							<i class="el-icon-edit-outline" style="margin-right: 10px;" title="编辑部门" @click.stop="handleAction('edit', data)"></i>
							<el-popconfirm :title="'确认删除部门：' + data.name +'?'" @confirm="handleDelete(node, data)">
								<template #reference>
									<i class="el-icon-delete" title="删除部门"></i>
								</template>
							</el-popconfirm>
						</span> -->
                    </span>
                    </template>
                </el-tree>
                <div class="add-department" v-if="isAdd" @click="handleAction"><span>+</span> 添加部门</div>
            </el-main>
        </el-container>
        <div class="drap-box" v-move></div>	
    </el-aside>
</template>

<script>
export default {
    props: {
        apiObj: { type: Object, default: () => {} },
        width: { type: String, default: '200' },
        isAdd: { type: Boolean, default: false },
        list: { type: Array, default: () => [] },
        height: { type: String, default: '100%' },
        check: { type: Boolean, default: false },
    },
    components: {
    },
    directives: {
        move(el, bindings) {
            el.onmousedown = function(e) {
                var init = e.clientX;
                var parent = document.getElementById("asideId");
                var initWidth = parent.offsetWidth;
                document.onmousemove = function(e) {
                    var end = e.clientX;
                    var newWidth = end - init + initWidth;
                    parent.style.width = newWidth + "px";
                };
                document.onmouseup = function() {
                    document.onmousemove = document.onmouseup = null;
                };
            };
        }
    },
    data(){
        return {
            defaultSelect: [],
            groupFilterText: '',
            showGrouploading: false,
        }
    },
    watch: {
        groupFilterText(val) {
            this.$refs.group.filter(val);
        }
    },
    mounted(){
    },
    methods:{
        //点击复选框
        checkChange(e,type){
            this.$emit('checkChange', e, type)
        },
        //树状结构删除下级
        async handleDelete(node,data){
            //设置添加或者删除后的默认展开项
            // this.defaultSelect = [data.parentId]

            var reqData = {id: data.id}
            this.showGrouploading = true
            var res = await this.apiObj.action.delete(reqData);
            this.showGrouploading = false
            if(res.error == 0){
                //这里选择刷新整个表格 OR 插入/编辑现有表格数据
                // this.$refs.table.tableData.splice(index, 1);
                this.$emit('updata');
                this.$notify.success("删除成功")
            }else{
                // this.$alert(res.message, "提示", {type: 'error'})
            }
        },
        //树状结构添加第一级
        handleAction(type = '', data = null){
            // if(data) this.defaultSelect = [data.id]
            this.$emit('handleAction', type, data)
        },
        //树过滤
        groupFilterNode(value, data){
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        //树点击事件
        groupClick(data){
            //设置添加或者删除后的默认展开项
            // this.defaultSelect = [data.id]

            this.$emit('change', data)
        },
        // 树节点展开
        handNodeExpand(data) {
            let flag = false
            this.defaultSelect.some(item => {
                if(item == data.id){
                    flag = true
                    return true
                }
            })
            if(!flag){
                this.defaultSelect.push(data.id)
            }
        },
        // 树节点关闭
        handNodeCollapse(data) {
            this.defaultSelect.some((item, i) => {
                if(item == data.id){
                    this.defaultSelect.length = i
                }
            })
        }
    }
}
</script>

<style>
#asideId{position: relative;}
.drap-box{height: 100%;width: 6px;position: absolute;right: 0;top: 0;z-index: 10;}
.drap-box:hover{cursor: e-resize;}
.options{margin-left: 20px;display: none;}
/* .el-tree-node__content:hover .options{display: inline;} */
.el-tree-node__content:hover .options{display: inline;position: absolute;padding:0 5px;right: 0;background: #ffffff;}
.add-department{width: 80%;height: 40px;border: 1px dashed #409eff;border-radius: 100px;text-align: center;line-height: 40px;margin: 0 auto;margin-top: 20px;cursor: pointer;font-size: 14px;color: #409eff;}
.add-department span{font-size: 16px;}
.custom-tree-node{flex: 1;display: flex;align-items: center;}
.custom-tree-node span{flex: 1;}
</style>